<template>
	<view class="p-2">
		<view class="flex py-2 justify-between align-center" hover-class="bg-light" @click="imagechange">
			<text class="font-md text-light-muted">头像</text>
			<view class="flex align-center">
				<image :src="image" class="image-tx" mode="aspectFill" v-if="image"></image>
				<text v-else class="iconfont icon-touxiang-yidenglu-weishezhitouxiang" style="font-size: 100rpx"></text>
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>

		<view class="flex py-2 justify-between align-center" hover-class="bg-light">
			<text class="font-md text-light-muted">昵称</text>
			<view class="flex align-center">
				<input type="text" v-model="name" @blur="changename" class="text-right uni-input" :placeholder="name ? '' : '请输入名称'" />
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>

		<view class="flex py-2 justify-between align-center" hover-class="bg-light" @click="changesex">
			<text class="font-md text-light-muted">性别</text>
			<view class="flex align-center">
				<text v-if="sex === '' || sex === null">未设置</text>
				<text v-else>{{ hanzisex }}</text>
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>

		<picker mode="date" :value="date" @change="bindDateChange" :end="enddate">
			<view class="flex py-2 justify-between align-center" hover-class="bg-light">
				<text class="font-md text-light-muted">生日</text>
				<view class="flex align-center">
					<text v-if="date === '' || date === null">未设置</text>
					<text v-else>{{ date }}</text>
					<text class="iconfont icon-xiugai pl-1"></text>
				</view>
			</view>
		</picker>
		<view class="flex py-2 justify-between align-center" hover-class="bg-light" @click="changeemotion">
			<text class="font-md text-light-muted">情感</text>
			<view class="flex align-center">
				<text v-if="qg">{{ qg }}</text>
				<text v-else>未设置</text>
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>
		<view class="flex py-2 justify-between align-center" hover-class="bg-light" @click="changeoccupation">
			<text class="font-md text-light-muted">职业</text>
			<view class="flex align-center">
				<text v-if="zy">{{ zy }}</text>
				<text v-else>未设置</text>
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>
		<view class="flex py-2 justify-between align-center" hover-class="bg-light" @click="show = true">
			<text class="font-md text-light-muted">家乡</text>
			<view class="flex align-center">
				<text v-if="address">{{ address }}</text>
				<text v-else>未设置</text>
				<text class="iconfont icon-xiugai pl-1"></text>
			</view>
		</view>

		<button class="text-light bg-main mt-3" @click="submit">提交</button>

		<u-picker mode="region" v-model="show" @confirm="changeaddress"></u-picker>
	</view>
</template>

<script>
import { updateUserInfo, getUserInfoByUserId } from '@/request/Api/user.js';
// #ifdef APP
const base_url = 'http://192.168.133.79:8081/v1';
// #endif
// #ifdef H5
const base_url = '/api/v1';
// #endif
export default {
	data() {
		return {
			sex: '',
			image: '',
			name: '',
			date: '',
			enddate: '2020-01-01',
			show: false,
			address: '',
			qg: '',
			zy: ''
		};
	},
	onLoad() {
		const userinfo = uni.getStorageSync('userInfo');
		if (userinfo) {
			getUserInfoByUserId({ userId: userinfo.id }).then((res) => {
				console.log(res.data);
				this.image = userinfo.userpic;
				this.name = userinfo.nikeName;
				this.sex = res.data.sex;
				this.date = res.data.birthday;
				this.address = res.data.path;
				this.qg = res.data.qg;
				this.zy = res.data.job;
			});
		}

		this.RealTime();
	},
	methods: {
		submit() {
			updateUserInfo({
				sex: this.sex,
				image: this.image,
				name: this.name,
				birthday: this.date,
				path: this.address,
				qg: this.qg,
				job: this.zy
			}).then((res) => {
				if (res.code === 1) {
					const userinfo = uni.getStorageSync('userInfo');
					userinfo.userpic = this.image;
					userinfo.nikeName = this.name;
					uni.setStorageSync('userInfo', userinfo);
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				}
			});
		},
		imagechange() {
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					uni.uploadFile({
						url: base_url + '/upload', //仅为示例，并非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							Auth: uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data);
							this.image = res.data.url;
						}
					});
				}
			});
		},
		changeemotion() {
			let list = ['已婚', '未婚', '离异'];
			uni.showActionSheet({
				itemList: list,
				success: (res) => {
					this.qg = list[res.tapIndex];
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		changeoccupation() {
			let list = ['IT', '教师', '医生'];
			uni.showActionSheet({
				itemList: list,
				success: (res) => {
					this.zy = list[res.tapIndex];
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		changeaddress(e) {
			this.address = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
		},
		RealTime() {
			let time = new Date();
			time.getFullYear();
			let Month = time.getMonth() + 1;
			let Date1 = time.getDate();
			if (Month < 10) {
				Month = '0' + Month;
			}

			if (time.getDate() < 10) {
				Date1 = '0' + time.getDate();
			}
			this.enddate = time.getFullYear() + '-' + Month + '-' + Date1;
			console.log(this.enddate);
		},
		changename() {
			console.log(this.name);
		},
		changesex(type) {
			uni.showActionSheet({
				itemList: ['保密', '男', '女'],
				success: (res) => {
					this.sex = res.tapIndex;
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		bindDateChange(e) {
			this.date = e.detail.value;
		}
	},
	computed: {
		hanzisex() {
			switch (this.sex) {
				case 0:
					return '保密';
					break;
				case 1:
					return '男';
					break;
				case 2:
					return '女';
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style></style>
